@import 'reset.css';
@import 'var.scss';
@import 'mixin.scss';

// 间接设置全局动态属性可以防止它们在局部被覆
:root {
  --THEME-FIX-BORDER:rgba(0,0,0,.1);
  --THEME-BGC: var(--USER-THEME-BGC, #f3f4f6);
  --THEME: var(--USER-THEME-COLOR, #e5473c);
  --THEME-BORDER: var(--USER-BORDER-THEME-COLOR, #e5473c33);
  --THEME-COLOR: var(--USER-THEME-COLOR, #e5473c);
}

//#root, body, html {
//  width: 100%;
//  height: 100%;
//  overflow: hidden;
//}

#root {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.mm-block {
  display: block !important;
}

.mm-none {
  display: none !important;
}

//flex
.mm-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
    position: relative;
}

.mm-content {
  min-height: 0;
  flex: 1;
  overflow: hidden;
  background-color: $theme-main-color;
}

//position
//.mm-wrapper {
//  position: relative;
//  height: 100%;
//  overflow: hidden;
//}
//
//.mm-content {
//  position: absolute;
//  top: 160px;
//  bottom: 0;
//  width: 100%;
//  overflow: hidden;
//}

.mm-blur {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  overflow: hidden;
  & .mm-blur-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vw;
    filter: blur(30px);
    transform: scale(1.5);
    @include bg-full($p: 50%, $s: cover);
    &:after {
      content: ' ';
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
      background-color: rgba(0, 0, 0, 0.25);
    }
  }
}

img {
  max-width: 100%;
}

.translate-enter {
  transform: translate3d(100%, 0, 0);
  &.translate-enter-active {
    transition: transform 0.3s;
    transform: translate3d(0, 0, 0);
  }
}
